<template>
	<scroll-view class="scroll-view">
		<view class="container">
			<view class="message-list">
				<template v-if="messages?.length > 0">
					<view class="message-item" v-for="(item, index) in messages" :key="index"
						@click="toMessageDetail(item)">
						<image class="avatar" src="/static/tabbar/plus.svg"></image>
						<view class="content">
							<view class="name">{{item.name}}</view>
							<view class="label">{{item.message}}</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="empty-container">
						<image style="width: 160px;height: 160px" src="/static/message/empty.svg"></image>
						<view class="label">啊哦~暂无好友数据</view>
					</view>
				</template>

				<view class="xiaoyi-btn mt-60" @click="createHandle()" v-if="openai">当前可创建角色1个</view>
			</view>
		</view>
	</scroll-view>
	<create-share-popup ref="cspRef"></create-share-popup>
</template>

<script>
	import CreateSharePopup from '@/components/create-share-popup/create-share-popup.vue'
	export default {
		components: {
			CreateSharePopup
		},
		data() {
			return {
				openai: uni.getStorageSync('openid'),
				messages: [
					{
						avatar: '',
						name: '用户1',
						message: '你能告诉我妈妈，微信支付怎么使用吗？'
					},
					// {
					// 	avatar: '',
					// 	name: '用户2',
					// 	message: '今天天气真好！'
					// },
				]
			}
		},
		mounted() {

		},
		methods: {
			createHandle() {
				this.$refs.cspRef.open()
			},
			toMessageDetail(item) {
				uni.navigateTo({
					url: `/pages/message/message-detail?id=${item.name}`
				})
			}
		}
	}
</script>

<style>
	.scroll-view {
		background: #fff;
		min-height: 100vh;
	}

	.container {
		padding: 0 30rpx;
		padding-bottom: 200rpx;
	}

	.message-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F6F6F6;
	}

	.avatar {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
	}

	.content {
		width: 0;
		flex: 1;
		margin-left: 20rpx;
	}

	.name {
		font-weight: 500;
		font-size: 28rpx;
		color: #3D3D3D;
		margin-bottom: 6rpx;
	}
</style>